<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CM系统</title>
    <link href="/cms/frame/bootstrap-4.6.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/cms/frame/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css">
    <link href="/cms/frame/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body, #container {
            width: 100%;
            height: 100%;
        }
        #container {
            display: flex;
            flex-direction: column;
            background-color: rgba(204, 229, 255, 0.2);
        }
        #bottom {
            width: 100%;
            height: 30px;
            border-top: 1px solid rgba(128, 128, 128, 0.2);
        }
        #main {
            width: 100%;
            flex: 1;
            display: flex;
        }
        #left {
            width: 200px;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        #logo {
            height: 80px;
            width: 100%;
            border-bottom: 1px solid rgba(128, 128, 128, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 45px; /* 调整字体大小 */
            font-family: 楷体;
            min-width: 200px;
        }
        #menuContainer {
            width: 100%;
            flex: 1;
            min-width: 200px;
        }
        /* 菜单样式 */
        .menu_title {
            width: 200px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
        .menu_title:hover {
            color: rgba(0, 0, 0, 0.6);
        }
        .menu_item {
            display: none;
        }
        .menu_title i {
            margin-right: 10px;
        }
        .menu_title span {
            width: 80px;
            text-align: justify;
            text-align-last: justify;
        }
        ul {
            margin: 0;
            list-style: none;
            padding: 0;
        }
        ul li a {
            display: block;
            width: 200px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-bottom: 1px solid white;
            text-decoration: none;
            color: black;
        }
        ul li a:hover {
            background-color: rgba(204, 229, 255, 0.4);
        }
        .home-link {
            color: black;
            text-decoration: none;
        }

        .home-link:hover {
            background-color: transparent;
            text-decoration: none;
        }

        #right {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        #top {
            height: 80px;
            width: 100%;
            border-bottom: 1px solid rgba(128, 128, 128, 0.2);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .dropdown span {
            display: block;
            width: 100px;
            padding-right: 20px;
            box-sizing: border-box;
        }
        #center {
            width: 100%;
            flex: 1;
            border-left: 1px solid rgba(128, 128, 128, 0.2);
        }
        #system-name {
            font-size: 30px;
            font-family: 黑体;
            text-align: center;
            color: rgba(135, 181, 255, 0.8);
            flex: 1;
        }


    </style>
</head>
<body>
<div id="container">
    <div id="main">
        <div id="left">
            <div id="logo">
                CM系统
            </div>
            <div id="menuContainer">
                <div class="menu">
                    <a href="index.html" target="center" class="home-link">
                        <div class="menu_title">
                            <i class="fa fa-home"></i>
                            <span>首页</span>
                        </div>
                    </a>
                </div>

                <div class="menu">
                    <div class="menu_title">
                        <i class="fa fa-user-plus"></i>
                        <span>人员管理</span>
                    </div>
                    <div class="menu_item">
                        <ul>
                            <li><a href="stu.html" target="center">学生信息管理</a></li>
                            <li><a href="tea.html" target="center">教师信息管理</a></li>
                        </ul>
                    </div>
                </div>
                <div class="menu">
                    <div class="menu_title">
                        <i class="fa fa-university"></i>
                        <span>班级管理</span>
                    </div>
                    <div class="menu_item">
                        <ul>
                            <li><a href="clas.html" target="center">班级信息管理</a></li>
                        </ul>
                    </div>
                </div>
                <div class="menu">
                    <div class="menu_title">
                        <i class="fa fa-book"></i>
                        <span>课程管理</span>
                    </div>
                    <div class="menu_item">
                        <ul>
                            <li><a href="course.html" target="center">课程信息管理</a></li>
                        </ul>
                    </div>
                </div>
                <div class="menu">
                    <div class="menu_title">
                        <i class="fa fa-building"></i>
                        <span>教室管理</span>
                    </div>
                    <div class="menu_item">
                        <ul>
                            <li><a href="room.html" target="center">教室信息管理</a></li>
                        </ul>
                    </div>
                </div>
                <div class="menu">
                    <div class="menu_title">
                        <i class="fa fa-line-chart"></i>
                        <span>统计分析</span>
                    </div>
                    <div class="menu_item">
                        <ul>
                            <li><a href="stat.html" target="center">学生分析</a></li>
                        </ul>
                        <ul>
                            <li><a href="stat2.html" target="center">教师分析</a></li>
                        </ul>
                    </div>
                </div>
                <div class="menu">
                    <div class="menu_title">
                        <i class="fa fa-group"></i>
                        <span>项目介绍</span>
                    </div>
                    <div class="menu_item">
                        <ul>
                            <li><a href="show.html" target="center">项目简介</a></li>
                            <li><a href="show2.html" target="center">功能、技术与难点</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="right">
            <div id="top">
                <span class="bi bi-text-indent-right" id="bars" style="font-size: 30px;color: rgba(0,0,0,0.7);"></span>
                <div id="system-name">
                    College Management System
                </div>
                <!-- 退出 -->
                <div class="dropdown">
                    <span class="dropdown-toggle" data-toggle="dropdown">
                        管理员&nbsp;&nbsp;
                    </span>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#" target="_blank" id="exit">注销&nbsp&nbsp<i class="fa fa-sign-out"></i></a>
                    </div>
                </div>
            </div>
            <div id="center">
                <iframe name="center" src="index.html" style="height: 100%; width: 100%; border: none;"></iframe>
            </div>
        </div>
    </div>
    <div id="bottom">
    </div>
</div>
<script src="/cms/frame/js/jquery-3.7.1.min.js"></script>
<script src="/cms/frame/bootstrap-4.6.2-dist/js/bootstrap.bundle.min.js"></script>
<script>
    jQuery(function () {
        // 左侧菜单折叠/展开
        jQuery("#bars").click(function(){
            let leftMenu = jQuery("#left");
            if (leftMenu.is(':visible')) {
                leftMenu.hide(500);
                jQuery(this).removeClass("bi-text-indent-right").addClass("bi-text-indent-left");
            } else {
                leftMenu.show(500);
                jQuery(this).removeClass("bi-text-indent-left").addClass("bi-text-indent-right");
            }
        });

        // 注销
        jQuery("#exit").click(function(){
            jQuery.get("/cms/AdminController/exit");
            location.href="/cms/html/login.html";
        });

        // 菜单点击展开/折叠
        jQuery(".menu_title").click(function (){
            let menuItem = jQuery(this).next();
            if (menuItem.is(':visible')) {
                menuItem.slideUp(500);
            } else {
                jQuery(".menu_item").slideUp(500);
                menuItem.slideDown(500);
            }
        });

        // 初始化菜单，使当前打开的菜单项对应的子菜单展开
        var currentUrl = window.location.href;
        jQuery('ul li a').filter(function() {
            return this.href === currentUrl;
        }).parent().addClass('active');
    });
</script>
</body>
</html>
